<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <script type="application/javascript" src="../js/vue.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

<!--
Vue中的事件修饰符:
    .stop 阻止冒泡(常用)
    .prevent 阻止默认事件(常用)
    .capture 使用事件捕获模式
    .self 只当在 event.target 是当前元素自身时触发处理函数
    .once 事件将只会触发一次(常用)
    .passive 滚动事件的默认行为将会立即触发，而不是等待事件完成
-->
<div id="app7">

    <p>我的名字叫{{name}}</p>
    <a :href="url" @click.prevent="showInfo">点击提示</a>

    <div class="demo1" @click.stop="showInfo">
        <button @click.stop="showInfo">点击提示(阻止事件冒泡)</button>
    </div>
</div>

<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#app7",
        data: {
            name: "张三",
            address: '北京',
            url: 'https://www.baidu.com'
        },
        methods: {
            showInfo(event) {
                alert('你好')
            }
        }
    })
</script>
</body>
</html>
